<template>
  <div class="sidebar">
    <CustomScrollbar
      :theme="theme.value === 'light' ? 'os-theme-dark' : 'os-theme-light'"
      class="sidebar-menu-scroller"
      style="height: calc(100% - 40px)">
      <ElMenu ref="menu" :collapse="collapse" class="sidebar-el-menu" :default-active="defaultActive">
        <template v-for="item in leftMenus">
          <SubmenuRender :key="item.id" :item="item" :level="1" />
        </template>
      </ElMenu>
    </CustomScrollbar>
    <div class="sidebar-footer" :title="collapse ? '点击展开侧栏' : null" @click="toggleSidebar">
      {{ collapse ? '&gt;&gt;' : '&lt;&lt; 收起侧栏' }}
    </div>
  </div>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
  import SubmenuRender from '@/views/skeleton/SubmenuRender'
  import { Menu } from 'element-ui'

  export default {
    name: 'SkeletonSidebar',
    components: { SubmenuRender, ElMenu: Menu },
    computed: {
      ...mapState('viewState', ['collapse', 'theme']),
      ...mapGetters('user', ['leftMenus']),
      defaultActive() {
        return this.$route.path
      }
    },
    methods: {
      ...mapMutations('viewState', ['toggleSidebar'])
    }
  }
</script>

<style lang="scss">
  .sidebar {
    position: absolute;
    top: $header-height;
    bottom: 0;
    left: 0;
    display: block;
    width: $sidebar-width;
    overflow-y: auto;
    background-color: var(--menu-item-background);
    transition: width 0.3s cubic-bezier(0.55, 0, 0.1, 1);

    &::-webkit-scrollbar {
      width: 0;
    }

    .el-submenu {
      .el-submenu__title {
        height: 56px;
        line-height: 56px;
      }

      .el-menu-item {
        height: 56px;
        line-height: 56px;
      }
    }
  }

  .el-menu--popup,
  .el-tooltip__popper {
    background-color: var(--menu-item-background);
  }

  .sidebar,
  .el-menu--popup,
  .el-tooltip__popper {
    .sidebar-el-menu:not(.el-menu--collapse) {
      width: $sidebar-width;
    }

    .el-menu {
      border-right: none;
    }

    .el-submenu,
    .el-menu-item {
      background-color: var(--menu-item-background);
    }

    .el-menu-item,
    .el-submenu {
      .menu-title,
      .menu-icon {
        display: inline-block;
        color: var(--menu-item-color);

        @include flex-not-shrink;
      }

      .menu-icon {
        font-size: 16px;
      }

      .menu-title {
        @include flex-item;
        margin-left: 4px;
        overflow: hidden;
      }
    }

    .el-menu-item,
    .el-submenu__title {
      @include flex-row;
      align-items: center;

      &.is-active,
      &:hover {
        background-color: var(--menu-item-hover-background);

        .menu-title,
        .menu-icon {
          color: var(--menu-item-active-color);
        }
      }
    }

    .el-menu-item {
      padding-right: 10px;
    }

    .sidebar-footer {
      width: 100%;
      height: 40px;
      padding: 0 20px;
      overflow: hidden;
      color: #fff;
      line-height: 40px;
      background-color: var(--menu-footer-background);
      cursor: pointer;
    }

    .el-menu--collapse {
      .el-submenu__icon-arrow,
      .menu-title {
        display: none;
      }
    }
  }
</style>
